<template>
    <div @click="father" class="cpn-style">
        <div class="cpn-img">
            <img :src="listdata.imgUrl" alt="" />
        </div>
        <div class="text">
            {{ listdata.text }}
        </div>
        <div class="pirce">
            {{ listdata.price | newPrice }}
            <div>
                <p>上新</p>
                <p>看相似</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    props: ['listdata'],
    methods: {
        father() {
            this.$emit('getson', this.listdata.text);
        }
    },
    filters: {
        newPrice(val) {
            return '¥' + val.toFixed(2);
        }
    }
};
</script>
<style lang="scss" scoped>
.cpn-style {
    margin: 0 2%;
    margin-top: 30px;
    // outline: 1px solid #9a9a9a;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fdfdfd;
}

.cpn-img {
    width: 100%;
}

img {
    width: 100%;
}

.pirce {
    font-size: 28px;
    margin: 5px 0;
    color: rgb(255, 77, 0);
    display: flex;
    align-items: center;
    justify-content: space-around;
    div {
        font-size: 20px;
        display: flex;
        justify-content: space-around;
        p {
            padding: 3px;
        }
        p:nth-of-type(1) {
            border: 1px solid rgb(255, 77, 0);
            border-radius: 5px;
        }
        p:nth-of-type(2) {
            margin-left: 20px;
            color: #ddd;
            border: 1px solid #ddd;
            border-radius: 15px;
        }
    }
}

.text {
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 30px;
    font-weight: bolder;
    margin: 10px 0;
}
</style>
